<template>
  <!-- 渲染面包屑 -->
  <!-- <nav>
    <div class="router_link">
      <ul class="breadcrumb">
        <li
          class="breadcrumb-item"
          v-for="(item, index) in muStore.mbRouterList"
          :key="index"
        >
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </div>
  </nav> -->
  <el-breadcrumb class="el-breadcrumb" separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in muStore.mbRouterList"
      :key="index"
      :to="item.path"
      >{{ item.name }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { useCounter } from "@/store/counter.js";
const muStore = useCounter();
const route = useRoute();
//监听当前浏览器的路由变化,当路由变化的时候,重新获取当前页面的路由和路由名称
const newRoutePath = ref("");
watch(
  route,
  (newRoute) => {
    newRoutePath.value = newRoute.path;
    //只要路由变化就重新加载一次接口
    getBreadcrumbList();
  },
  {
    deep: true,
  }
);
const breadcrumbList = ref(muStore.mbRouterList ? muStore.mbRouterList : []);
//登录之后,动态获取当前页面的路由和路由名称
const getBreadcrumbList = () => {
  // 通过forEcah循环遍历muStore.userRouterList数组中包含children和不包含childrend的所有路由,如果当前的newRoutePath和数组中的path相等,则将数组中的name和path添加到breadcrumbList数组中
  muStore.userRouterList.forEach((item) => {
    if (item.children) {
      item.children.forEach((child) => {
        if (child.route === newRoutePath.value) {
          console.log("child", breadcrumbList.value);
          breadcrumbList.value.push({
            name: child.name,
            path: child.route,
          });
          //如果breadcrumbList.value数组中存在两个相同的path,则删除前面一个
          breadcrumbList.value = breadcrumbList.value.filter((item, index, arr) => {
            return arr.findIndex((i) => i.path === item.path) === index;
          });
          //将最后的结果保存起来,防止刷新浏览器之后,面包屑消失
          muStore.getUserRouteList(breadcrumbList.value);
        }
      });
    } else {
      if (item.route === newRoutePath.value) {
        breadcrumbList.value.push({
          name: item.name,
          path: item.route,
        });
        breadcrumbList.value = breadcrumbList.value.filter((item, index, arr) => {
          return arr.findIndex((i) => i.path === item.path) === index;
        });
        //将最后的结果保存起来,防止刷新浏览器之后,面包屑消失
        muStore.getUserRouteList(breadcrumbList.value);
      }
    }
  });
};
</script>

<style scoped lang="scss">
.el-breadcrumb {
  width: 1200px;
  //超过的部分左右滑动
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 auto;
  display: flex;
  height: 40px;
  // width: max-content; /* 确保内容宽度足够时滚动条出现 */
}
/* 自定义滚动条样式 */
.el-breadcrumb::-webkit-scrollbar {
  height: 4px; /* 滚动条高度 */
}

.el-breadcrumb::-webkit-scrollbar-thumb {
  background-color: #dcdfe6; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滑块圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.el-breadcrumb::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道颜色 */
}
.router_link {
  // 宽度1200px 超过的内容左右滑动
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 auto;
  display: flex;

  border: 1px solid red;
  .breadcrumb-item {
    display: flex;
    height: 40px;
  }
}
.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;

  // .breadcrumb-item + .breadcrumb-item::after {
  //   content: "/";
  //   margin: 0 8px;
  //   color: #333333;
  // }
  // .breadcrumb-item a {
  //   color: #333333;
  //   text-decoration: none;
  // }
  // .breadcrumb-item a:hover {
  //   text-decoration: none;
  //   color: #409eff;
  // }
}
</style>
